import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import { connect } from 'react-redux';

import { RootState } from './redux/store';

import style from './css/App.module.css';

interface IProps {
  isShow: boolean;
}

class Tabbar extends Component<any, IProps> {
  render() {
    return (
      <>
        {this.props.isShow && (
          <ul className={style.tabbar}>
            <li>
              <NavLink to={'/film/nowPlaying'}>电影</NavLink>
            </li>
            <li>
              <NavLink to={'/cinema'}>影院</NavLink>
            </li>
            <li>
              <NavLink to={'/center'}>我的</NavLink>
            </li>
          </ul>
        )}
      </>
    );
  }
}
const mapStateToProps = (state: RootState) => {
  return {
    isShow: state.tabbar.value,
  };
};
export default connect(mapStateToProps)(Tabbar);
